<html lang="ee">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Harmony</title>
</head>
<link rel="stylesheet" href="CSS/TransitionInterface.css">
<body>
<div class="container">
    <span class="delay">Welcome to <span style="color: #762062">Lin</span>_<span style="color: #00a8e0;">Fel</span></span>
    <div class="letter">
        <ul class="ul">
            <li>ix</li>
        </ul>
        <svg>
            <filter id="blur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="0 6"/>
            </filter>
        </svg>
    </div>
    <span class="delay"></span>
</div>

<div class="shadow__spot"></div>

<script>
    const filterElem = document.querySelector('feGaussianBlur')
    const clearFilter = () => {
        const value = parseFloat(filterElem.getAttribute('stdDeviation').split(' ')[1]) - 0.06
        if (value > 0) {
            filterElem.setAttribute('stdDeviation', `0 ${value}`)
            requestAnimationFrame(clearFilter)
        } else {

        }
    }

    setTimeout(clearFilter, 500)
    // 2秒后跳转到u.html
    setTimeout(function () {
        window.location.href = "shop.jsp";
    }, 2000);
</script>
</body>
</html>